<!--  -->
<template>
  <div class="room">
    <div class="so">
      <div class="am-flexbox">
        <i class="el-icon-arrow-left" @click="go(-1)"></i>
        <div class="SearchHeader">
          <div class="location">
            <router-link to="/city">
              <input
                type="text"
                v-model="shghgd"
                placeholder="上海"
                class="int"
                @click="iii"
              />
              <i class="el-icon-caret-bottom"></i>
            </router-link>
          </div>
          <div class="searchForm">
            <van-icon name="search" />
            <router-link to="/search">
              <span>请输入小区或地址</span>
            </router-link>
          </div>
        </div>
        <router-link to="/map">
          <i class="el-icon-map-location"></i>
        </router-link>
      </div>
    </div>
    <van-sticky type="primary">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>
    </van-sticky>
    <div class="roomain">
      <dl
        v-for="(item, index) in list"
        :key="(item, index)"
        @click="detail(item.houseCode)"
      >
        <dt>
          <img :src="`http://47.102.145.189:8009` + item.houseImg" alt="" />
        </dt>
        <dd>
          <h3>{{ item.title }}</h3>
          <span class="desc">{{ item.desc }}</span
          ><br />
          <div>
            <span class="HouseItem_tag__3V_dF HouseItem_tag1__35Lgt">公寓</span>
            <span class="HouseItem_tag__3V_dF HouseItem_tag2__DMNSG"
              >限女生</span
            >
          </div>
          <span class="yuan"
            ><b class="yue">{{ item.price }}</b> 元/月</span
          >
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: [],
      shghgd: [],
      value1: 0,
      value2: "a",
      value3: "a",
      value4: "a",
      option1: [
        { text: "区域", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "方式", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      option3: [
        { text: "租金", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      option4: [
        { text: "筛选", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    go() {
      this.$router.push("/");
    },
    sdjhvgh() {
      this.shghgd = window.localStorage.getItem("label");
      console.log(this.shghgd);
    },
    iii() {
      this.$router.push("/map");
    },
    detail(id) {
      // console.log(item);
      this.$router.push(`/detail/${id}`);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    axios
      .get(
        "http://47.102.145.189:8009/houses?cityId=AREA%7C88cff55c-aaa4-e2e0&area=AREA%7C88cff55c-aaa4-e2e0&rentType=true&price=null&more=CHAR%7C76eb0532-8099-d1f4%2CFLOOR%7C1%2CAREA%7C88cff55c-aaa4-e2e0%2CORIEN%7C61e99445-e95e-7f37%2Ctrue&roomType=ROOM%7Cd1a00384-5801-d5cd&oriented=ORIEN%7C61e99445-e95e-7f37&characteristic=CHAR%7C76eb0532-8099-d1f4&floor=FLOOR%7C1&start=1&end=20"
      )
      .then((res) => {
        console.log(res.data.body);
        this.list = res.data.body.list;
      });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.room {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  .so {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #f6f5f6;

    .am-flexbox {
      overflow: hidden;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0 10px;
      .el-icon-map-location {
        font-size: 25px;
        color: #00ae66;
      }
      .el-icon-arrow-left {
        font-size: 20px;
        color: #999;
      }
      .SearchHeader {
        text-align: left;
        overflow: hidden;
        display: flex;
        align-items: center;
        flex: 1 1;
        height: 34px;
        padding: 5px 5px 5px 8px;
        margin: 0 10px;
        border-radius: 3px;
        background-color: #fff;
        .location {
          .int {
            font-size: 14px;
            border: none;
            width: 30px;
          }
          .el-icon-caret-bottom {
            margin-left: 2px;
            font-size: 12px;
            color: #7f7f80;
          }
        }
        .searchForm {
          margin-left: 12px;
          border-left: 1px solid #ccc;
          display: flex;
          flex: 1 1;
          align-items: center;
          .van-icon {
            vertical-align: middle;
            padding: 0 2px 0 12px;
            color: #9c9fa1;
            font-size: 15px;
          }
          span {
            padding-left: 4px;
            font-size: 13px;
            color: #9c9fa1;
          }
        }
      }
    }
  }

  .roomain {
    width: 100%;
    dl {
      width: 100%;
      height: 130px;
      display: flex;
      border-bottom: 1px solid #ccc;
      align-items: center;
      dt {
        img {
          width: 100px;
          height: 100px;
          margin: 0 10px;
        }
      }
      dd {
        overflow: hidden;
        line-height: 22px;
        h3 {
          font-size: 15px;
          color: #394043;
        }
        .desc {
          font-size: 12px;
          color: #afb2b3;
        }
        .HouseItem_tag__3V_dF {
          display: inline-block;
          font-size: 12px;
          border-radius: 3px;
          padding: 4px 5px;
          margin-right: 5px;
          line-height: 12px;
        }
        .HouseItem_tag1__35Lgt {
          color: #39becd;
          background: #e1f5f8;
        }
        .HouseItem_tag2__DMNSG {
          color: #3fc28c;
          background: #e1f5ed;
        }
        .yuan {
          font-size: 12px;
          color: #fa5741;
          .yue {
            font-size: 16px;
            // font-weight: bolder;
          }
        }
      }
    }
  }
}
</style>
